<template>
  <div id="area_chart" class="yl-chart-container"></div>
</template>

<script>
import { Area } from '@antv/g2plot'
export default {
  props: {
    areaInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      data: [
        {
          type: '家具家电',
          sales: 38
        },
        {
          type: '粮油副食',
          sales: 52
        },
        {
          type: '生鲜水果',
          sales: 61
        },
        {
          type: '美容洗护',
          sales: 145
        },
        {
          type: '母婴用品',
          sales: 48
        },
        {
          type: '进口食品',
          sales: 38
        },
        {
          type: '食品饮料',
          sales: 38
        },
        {
          type: '家庭清洁',
          sales: 38
        }
      ]
    }
  },

  mounted () {
    console.log(this.areaInfo)
    console.log(Object.prototype.toString.call(this.areaInfo))
    this.$nextTick(() => {
      this.createAreaChart()
    })
  },

  methods: {
    createAreaChart () {
      const areaPlot = new Area(document.getElementById('area_chart'), {
        title: {
          visible: true,
          text: '基础面积图'
        },
        data: this.data,
        xField: 'type',
        yField: 'sales'
      })

      areaPlot.render()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
